import React from 'react';
import styles from './Modal.module.less';
import { Lang } from '@app/lang';
import Link from '@app/components/Link';

export default class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuText: [
        { text: '首页', links: '/' },
        { text: '账户', links: '/Account' },
        { text: '团队', links: '/Team' },
        { text: '客服', links: props.server },
        { text: '语言', links: '' },
        { text: 'Twitter', links: '' },
        { text: 'Telegram', links: '' },
      ],
      lang: [
        { text: 'English', lang: 'en-US' },
        { text: '中文繁体', lang: 'zh-TW' },
        { text: '한국어', lang: 'ko-KR' },
        { text: '日本語', lang: 'ja-JP' },
      ],
      langSelect: localStorage['lang'] || 'en-US',
    };
  }

  render() {
    const { isOpenModal, closemodal } = this.props;
    const { menuText } = this.state;
    if (!isOpenModal) {
      return;
    }
    return (
      <div className={styles['ui-modal']} onClick={() => closemodal()}>
        <div className={styles['ui-content']}>
          {menuText.map((o, i) => {
            return (
              <div className={[styles['ui-menu'], i == 0 && styles['ui-top-bor']]} key={i}>
                <div
                  className={styles['ui-banner']}
                  onClick={(e) => {
                    i == 4 && this._toggleLangDiv(e);
                  }}
                >
                  <Link to={o.links} className={styles['ui-text']}>
                    {o.text.LANG()}
                    <img src={`images/arrow_${i == 4 ? 'bottom' : 'right'}.png`} alt="" />
                  </Link>
                </div>
                {i == 4 && this._showlang()}
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  //   多语言div渲染
  _showlang() {
    const { lang, langSelect } = this.state;
    return (
      <div className={styles['ui-lang-box']} id="lang">
        {lang.map((item, k) => {
          return (
            <p
              className={[styles['ui-lang'], langSelect === item.lang && styles['select']]}
              key={item.lang}
              onClick={() => this._setLanguage(item.lang)}
            >
              {item.text}
            </p>
          );
        })}
      </div>
    );
  }

  //   多语言列表收缩
  _toggleLangDiv(e) {
    e.stopPropagation();
    let bro = document.getElementById('lang');
    bro.classList.toggle('ui-show');
  }

  //   多语言切换
  _setLanguage(lang) {
    this.setState({
      langSelect: lang,
    });
    Lang.setLanguage(lang);
  }
}
